<template>
  <div>
    <van-nav-bar title="邮箱号注册" left-arrow @click-left="onClickLeft" />
    <van-form>
      <van-field v-model="user.email" name="username" label="邮箱" placeholder="网易邮箱号" :clearable="true" :rules="[{ validator: valEmial, message: '请填写正确网易邮箱号' }]" />
      <van-field v-model="user.code" center id="password" label="验证码" autoComplete="true" placeholder="邮箱验证码" name="valSend" :rules="[{ validator: valSend, message: '请输入6位验证码' }]">
        <template #button>
          <van-button native-type="button" @click="sendFn" size="small" type="primary" round v-if="sendBtn">{{ sendmsg }}</van-button>
          <van-button disabled size="small" type="primary" round v-else>{{ sendmsg }}</van-button>
        </template>
      </van-field>
      <van-field v-model="user.password" name="password" type="password" autoComplete="true" label="密码" placeholder="密码" :rules="[{ validator: valPwd, message: '密码为6~12位' }]" />
      <van-checkbox v-model="checked" checked-color="#6ed9a2">同意《忘忧日记隐私政策》</van-checkbox>
      <div class="buttonBox">
        <van-button @click="onSubmit" type="primary" round block native-type="submit" v-if="loginBtn">注册</van-button>
        <van-button disabled type="primary" round block v-else>注册</van-button>
      </div>
    </van-form>
    <!-- 注册通知 -->
    <LNotify :visible="visibleShow" :loading="loadingShow" :title="loginErr">
      <template #iconOk v-if="iconOk">
        <van-icon name="thumb-circle" class="iconOk" />
      </template>
      <template #iconErr v-else>
        <van-icon name="warning" class="iconErr" />
      </template>
    </LNotify>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { emailApi, registerAPi } from '@/api/index'
import LNotify from '@/components/packaging/L-Notify.vue'

export default {
  components: {
    LNotify
  },
  name: 'registerIndex',
  data () {
    return {
      user: {
        email: '',
        password: '',
        code: '',
        time: new Date().getTime()
      },
      // 单选框
      checked: false,
      // 用户输入邮箱校验
      emailrules: /[1-9][0-9]{4,}@163.com/,
      // 用户输入的验证码校验
      coderules: /^.{6}$/,
      // 用户输入的密码校验
      pwdrules: /^[^\u4e00-\u9fa5 ]{6,16}$/,
      // 发送验证码
      sendmsg: '发送',
      // 验证码时间
      timer: 60,
      // 验证码按钮
      sendBtn: true,
      // 登录按钮
      loginBtn: true,
      // 邮箱注册通知
      visibleShow: false, // 弹窗组件 显示
      loadingShow: true, // 加载动画 显示
      loginErr: '', // 通知文字
      iconOk: true // 登陆成功/失败图标
    }
  },
  methods: {
    // 返回登录页
    onClickLeft () {
      this.$router.replace('/login')
    },
    // 校验 用户邮箱 格式
    valEmial (val) {
      return this.emailrules.test(val)
    },
    // 校验 验证码 格式
    valSend (val) {
      return this.coderules.test(val)
    },
    valPwd (val) {
      return this.pwdrules.test(val)
    },
    // 发送验证码按钮
    async sendFn () {
      if (this.valEmial(this.user.email) === true) {
        this.sendBtn = !this.sendBtn
        // console.log('发送验证码')
        // const { data: res } =
        await emailApi(this.user.email)
        // console.log(res, '发送验证码')
        this.sendmsg = this.timer + 's'
        this.timeFn = setInterval(() => {
          this.timer--
          this.sendmsg = this.timer + 's'
          if (this.timer === 0) {
            this.sendmsg = '重新发送'
            clearInterval(this.timeFn)
            this.timer = 60
            this.sendBtn = true
          }
        }, 1000)
      }
    },
    // 注册按钮
    async onSubmit (values) {
      if (this.checked === true) {
        if (this.valEmial(this.user.email) && this.valSend(this.user.code) && this.valPwd(this.user.password) === true) {
          this.loginBtn = !this.loginBtn
          this.visibleShow = true
          try {
            const { data: res } = await registerAPi(this.user)
            if (res.status === 201) {
              setTimeout(() => {
                this.loadingShow = false
                this.loginErr = '注册成功'
                setTimeout(() => {
                  this.visibleShow = false
                  this.loginBtn = true
                  setTimeout(() => {
                    this.$router.replace('/login')
                  }, 500)
                }, 1500)
              }, 1800)
            }

            if (res.status === 401) {
              this.iconOk = false
              setTimeout(() => {
                this.loadingShow = false
                this.loginErr = '验证码错误'
                setTimeout(() => {
                  this.visibleShow = false
                  this.loginBtn = true
                }, 1500)
              }, 1800)
            }

            if (res.status === 402) {
              this.iconOk = false
              this.loginBtn = false
              setTimeout(() => {
                this.loadingShow = false
                this.loginErr = '注册失败 请稍后再试'
                setTimeout(() => {
                  this.visibleShow = false
                  this.loginBtn = true
                }, 1500)
              }, 1800)
            }
            if (res.status === 403) {
              this.iconOk = false
              setTimeout(() => {
                this.loadingShow = false
                this.loginErr = '该邮箱已被注册'
                setTimeout(() => {
                  this.visibleShow = false
                  this.loginBtn = true
                }, 1500)
              }, 1800)
            }
          } catch (error) {
            this.iconOk = false
            console.log('网络不佳')
            this.loginBtn = false
            setTimeout(() => {
              this.loadingShow = false
              this.loginErr = '请检查您的网络...'
              setTimeout(() => {
                this.visibleShow = false
                this.loginBtn = true
              }, 1500)
            }, 1800)
          }
        }
      } else {
        Toast({
          message: '请勾选隐私政策',
          duration: 1000
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  margin-bottom: 10px;
}
/deep/.van-nav-bar__content {
  height: 60px;
}
.buttonBox {
  margin: 30px 20px;
}
.van-checkbox {
  font-size: 12px;
  margin: 20px 30px;
}
.van-field__button {
  padding-left: 0;
}
/deep/.van-checkbox__icon .van-icon {
  border: 1px solid #6ed9a2;
  width: 19px;
  height: 19px;
}
/deep/.van-field__error-message {
  position: absolute;
  top: 20px;
  left: 0;
  font-size: 0.26667rem;
}
/deep/[class*="van-hairline"]::after {
  border: 0;
}
.van-button--small {
  width: 80px;
}
/deep/.van-nav-bar .van-icon {
  color: #000000;
  font-size: 25px;
}
.van-cell {
  padding: 10px 30px;
  height: 50px;
}
.sjzc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  font-size: 14px;
  font-weight: 400;
  color: #aaaaaa;
}
.van-toast {
  margin: 20px 15px;
  color: red !important;
}
.van-toast__text {
  color: green;
}
/deep/.van-checkbox__label {
  color: #6ed9a2;
}
/deep/ .iconErr {
  color: #eb400c !important;
}
</style>
